<script lang="ts" setup></script>

<template>
  <header class="header flex flex-col">
    <div class="h-[36px] z-10 relative" />
    <div class="flex-1 z-10 relative flex pt-3 px-1">
      <div class="flex-1 relative">
        <img src="@/assets/png/header-left.png" class="absolute" />
        <div
          class="absolute left-[248px] bg-contain bg-center text-white text-xl line-height-36px  text-center transition-all duration-300 button-left cursor-pointer">
          <router-link to="/">首页</router-link>
        </div>
        <div
          class="absolute left-[384px] bg-contain bg-center text-white text-xl line-height-36px  text-center transition-all duration-300 button-left cursor-pointer">
          <router-link to="/CaseOverView">案件总览</router-link>
        </div>
        <div
          class="absolute left-[520px] bg-contain bg-center text-white text-xl line-height-36px  text-center transition-all duration-300 button-left cursor-pointer">
          <router-link to="/switch/0000">案件详情</router-link>
        </div>
      </div>
      <div class="w-[568px]" />
      <div class="flex-1 relative">
        <div
          class="absolute right-[520px] bg-contain bg-center text-white text-xl line-height-36px  text-center transition-all duration-300 button-right cursor-pointer">
          <router-link to="/switch">被举报人</router-link>
        </div>
        <div
          class="absolute right-[384px] bg-contain bg-center text-white text-xl line-height-36px  text-center transition-all duration-300 button-right cursor-pointer">
          <router-link to="/switch">匿名查看</router-link>

        </div>
        <div
          class="absolute right-[248px] bg-contain bg-center text-white text-xl line-height-36px  text-center transition-all duration-300 button-right cursor-pointer">
          <router-link to="/switch">实名举报</router-link>
        </div>
        <img src="@/assets/png/header-left.png" class="absolute right-0 scale-x-[-1]" />
      </div>
    </div>

    <div class="header-bg">
      <img class="title-image" src=" @/assets/png/title1.png" alt="" />
    </div>
  </header>
</template>

<style scoped>
.header {
  height: 90px;
  /* 顶部高度 */
  position: relative;
  overflow: hidden;
  /* 防止内容溢出 */
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/png/header_bg.png');
  background-size: contain;
  background-position: center;
}

.title-image {
  position: relative;
  /* 相对定位 */
  z-index: 2;
  /* 文字标题图片在上层 */
  margin: 32px auto;
}

.button-left {
  background-image: url('@/assets/png/button-bg1.png');
  width: 162px;
  height: 40px;
}

.button-left:hover {
  background-image: url('@/assets/png/button-bg1-hover.png');
}

.button-right {
  background-image: url('@/assets/png/button-bg2.png');
  width: 162px;
  height: 40px;
}

.button-right:hover {
  background-image: url('@/assets/png/button-bg2-hover.png');
}
</style>
